<template>
    <div style="height: 100%;">
        <div class="header">
            <van-tabs type="card" class="tab-button-01" @click="jump" v-model="active">
                <van-tab id="head-myCourse" :title="$t('my_course')"></van-tab>
                <van-tab id="head-myCatalog" :title="$t('cos_catalog')"></van-tab>
                <van-tab id="head-myRecommend" :title="$t('cos_recommend')"></van-tab>
            </van-tabs>
        </div>
        <div class="content" style="padding: 54px 0 56px;">
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </div>
        <bottom-navigation></bottom-navigation>
    </div>
</template>

<script>
export default {
    name: 'LearnIndex',
    data() {
        return {
            path: '',
            encId: '',
            active: 0
        };
    },
    methods: {
        jump(index) {
            switch (index) {
            case 0:
                this.$router.push({path: `/LearnIndex/myCourses/${this.encId}`});
                break;
            case 1:
                this.$router.push({path: '/LearnIndex/electiveCenter'});
                break;
            case 2:
                this.$router.push({path: '/LearnIndex/recommendCourse'});
                break;
            }
        },
        init() {
            if (window.localStorage.getItem('loginUser')) {
                this.encId = window.localStorage.getItem('loginUser');
            } else {
                this.$axios({
                    method: 'GET',
                    url: '/app/api/user/current'
                }).then(res => {
                    this.encId = this.wbEncryptor(res.data.usrEntId);
                });
            }
        }
    },
    mounted() {
        this.$store.commit('addKeepAliveList', 'LearnIndex');
        this.init();
    },
    activated() {
        this.init();
    },
    computed: {
        pathSelected() {
            return function(tab) {
                if (this.$route.path.indexOf(tab) !== -1) {
                    return true;
                } else {
                    return false;
                }
            };
        },
        getKeepAliveList() {
            return this.$store.state.config.keepAliveList;
        }
    }
};
</script>

<style scoped lang="less">
    /deep/.van-tabs__nav--card{
        border: 1px solid #075ebb;
        border-radius: 18px;
        .van-tab{
            color: #075ebb;
            border-right: none;
        }
        .van-tab.van-tab--active{
            background-color: #075ebb;
        }
        .van-tab:nth-child(1){
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }
        .van-tab:nth-child(3){
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }
        .van-tab.van-tab--active {
            color: white;
        }
    }
    /deep/.van-nav-bar__content .van-nav-bar__title {
        max-width: 80%;
        width: 80%;
        margin-left: 50px;
    }
    .header-white {
        background-color: #fff;
    }
</style>
